<template>
<div>
    <Input v-model="filter.name">
        <Button slot="append" icon="ios-search" @click="search"></Button>
    </Input>
    <Table border :columns="columns7" ref="selection" :data="list" @on-selection-change="selected" @on-row-click="getID"></Table>
    <Button @click="handleSelectAll(true)" style="margin-top:10px">Set all selected</Button>
    <Button @click="handleSelectAll(false)" style="margin-top:10px">Cancel all selected</Button>
    <Button @click="tj" style="margin-top:10px" type="success">add</Button>
    <Modal
        title="添加用户"
        v-model="modal10"
        class-name="vertical-center-modal"
        @on-ok="add">
        <Form :model="formItem" :label-width="80">
          <FormItem label="username">
            <Input v-model="formItem.name" placeholder="Place input the username"></Input>
          </FormItem>
          <FormItem label="password">
            <Input type="password" v-model="formItem.password" placeholder="Place input the password"></Input>
          </FormItem>
          <FormItem label="render">
              <RadioGroup v-model="formItem.gender">
                  <Radio label="male">Male</Radio>
                  <Radio label="female">Female</Radio>
              </RadioGroup>
          </FormItem>
        </Form>
    </Modal>
    <Button type="error" style="margin-top:10px" @click="delectSelected">delectSelected</Button>
    <Page :total="total" size="small" show-elevator show-sizer :page-size-opts="pageSizeOpts" :styles="Pstyle" @on-change="changePage" @on-page-size-change="changePageSize"></Page>

</div>

</template>
<script>
import md5 from 'crypto-js/md5';
import Base from "../base";
export default {
  mixins:[Base],
  data() {
    return {
      modules:{type:'users'},
      formItem: {
        name: '',
        password:'',
        gender: 'male',
      },
      Pstyle: { marginTop: "10px" },
      columns7: [
        {
            type: 'selection',
            width: 60,
            align: 'center'
        },
        {
          title: "Name",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "Gender",
          key: "gender"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.handleRender();
                    }
                  }
                },
                "change"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "delete"
              )
            ]);
          }
        }
      ],
    };
  },

  methods:{
    handleRender () {
      this.$http
      .get(`http://10.31.160.71:3000/users/data/`+this.prevID._id)
      .then(response => {
        this.formItem.name=response.data.name;
        this.formItem.render=response.data.render;

        this.modal10 = true;
      });

    },
add(){
        this.formItem.password=md5(this.formItem.password).toString();
        if(this.formItem.name!==''&&this.prevID===''){
          this.$http
          .post(`http://10.31.160.71:3000/users/data`, this.formItem)
          .then(response => {
            this.updata();
            this.formItem.name='';
            this.formItem.gender='';
            this.formItem.password='';
            this.success(true);
          });
        }else if(this.formItem.name!==''&&this.prevID!==''){
          this.$http
          .put(`http://10.31.160.71:3000/users/data/`+this.prevID._id, this.formItem)
          .then(response => {
            this.updata();
            this.success(true);
          });
        }else{
          this.error(true);
        }

    },
    //添加用户
    tj(){
      this.modal10 = true;
      this.prevID='';
      this.formItem={
        name: '',
        password:'',
        gender: 'male'
      };
    },

  },
  created() {
    this.updata();
  }
};
</script>

